/**
 * @name Home
 * @desc smdp 后台区块链展示
 * @author darcrand
 * @version 2018-10-02
 */

import React, { Component } from 'react'
import { Map } from 'react-amap'
import { inject, observer } from 'mobx-react'
import MenuBar from './MenuBar'
import DetailCover from './DetailCover'
import AreaMarkers from './AreaMarkers'
import PeopleMarkers from './PeopleMarkers'
import './styles.scss'

const defaultMapCenter = { longitude: '113.303363', latitude: '22.246193' }
const boundaryZoom = 13

@inject('MapData')
@observer
class Home extends Component {
    static defaultProps = {
        list: [
            { hash: '521346', longitude: '113.394483', latitude: '22.222576', type: 'a', name: 'Lisa', val: 20 },
            { hash: '521847', longitude: '113.202835', latitude: '22.265911', type: 'a', name: 'Ciry', val: 80 }
        ]
    }

    state = {
        mapIns: null,
        center: { lng: null, lat: null },
        zoom: null,
        showCover: false,
        showMenu: false,

        currHash: '',

        radiusIndex: 0
    }

    componentDidMount() {
        this.props.MapData.getMarkers()
    }

    onMapInit = ins => {
        this.setState({ mapIns: ins })
    }

    onMapMove = () => {
        const { lng, lat } = this.state.mapIns.getCenter()
        const zoom = this.state.mapIns.getZoom()
        this.setState({ center: { lng, lat }, zoom })
        console.log('complete', lng, lat, zoom)
    }

    onAreaClick = ({ longitude, latitude }) => {
        this.state.mapIns.setZoomAndCenter(boundaryZoom, [longitude, latitude])
    }

    onMarkerClick = hash => {
        console.log(hash)
        console.log('marker ===>', this.props.list.find(v => v.hash === hash))
        this.setState({ currHash: hash })
        this.toggleCover(true)
    }

    toggleCover = bool => {
        this.setState({ showCover: bool })
    }

    toggleMenu = bool => {
        this.setState({ showMenu: bool })
    }

    render() {
        // const list = this.props.MapData.markerList
        const list = this.props.list
        const showAreaMarkers = this.state.zoom < boundaryZoom

        return (
            <div classes="container">
                <div classes="map-container">
                    <Map
                        center={defaultMapCenter}
                        viewMode="3D"
                        pitch={45}
                        events={{ created: this.onMapInit, moveend: this.onMapMove, zoomend: this.onMapMove }}
                    >
                        {AreaMarkers(showAreaMarkers, this.onAreaClick)}

                        {PeopleMarkers(!showAreaMarkers, list, this.onMarkerClick)}
                    </Map>
                </div>

                <h1 classes="title">标题</h1>

                <DetailCover
                    show={this.state.showCover}
                    hash={this.state.currHash}
                    onClose={() => this.toggleCover(false)}
                />

                <MenuBar show={this.state.showMenu} handleArrow={this.toggleMenu} />
            </div>
        )
    }
}

export default Home
